<template>
	<view class="container">
		<!-- 头部：日期选择及周信息 -->
		<view class="header">
			<view class="header-left-section">
				<view class="date-selector">
					<text class="arrow" @click="goPrevDay">←</text>
					<transition name="fade-date" mode="out-in">
						<picker mode="date" :value="currentDate.replace(/\//g, '-')" :start="termStartPicker"
							:key="currentDate" @change="onDateChange">
							<view class="date-box">
								<text class="date">{{ formattedDate }}</text>
								<text class="weekday">{{ weekday }}</text>
							</view>
						</picker>
					</transition>
					<text class="arrow" @click="goNextDay">→</text>
				</view>
				<text class="week-info">{{ weekInfo }}</text>
			</view>
			<view class="header-right-section">
				<button class="reminder-toggle-btn" @click="toggleAutoReminder" @longpress="showReminderSettings"
					:style="{ 
						backgroundColor: reminderSettings.enabled ? '#f1f1f2' : '#909399'
					}">
					{{ reminderSettings.enabled ? '🔔' : '🔕' }}
				</button>
				<button class="today-btn" @click="goToday">今天</button>
			</view>
		</view>

		<!-- 当日课程表 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">当日课程表</text>
				<text class="reminder-status" v-if="reminderSettings.enabled">
					🔔 已开启{{reminderSettings.advanceMinutes}}分钟提前提醒
				</text>
			</view>
			<!-- 使用 transition-group 实现列表动画 -->
			<transition-group name="list" tag="view" class="course-list">
				<!-- 加载中状态 -->
				<view v-if="isLoading" class="loading-state" key="loading">
					<view class="loading-spinner"></view>
					<text class="loading-text"></text>
				</view>

				<!-- 有课程时显示 -->
				<view v-else-if="eventList.length" class="course-card" v-for="(course, index) in eventList"
					:key="course.id" @click="showCourseDetail(course)"
					:style="{ borderLeftColor: getCourseColor(course.color) }">
					<!-- 课程卡片内容保持不变 -->
					<view class="course-time">
						<text class="time">{{ course.time }}</text>
					</view>
					<view class="course-content">
						<text class="title">{{ course.title }}</text>
						<view class="course-meta">
							<text class="source">{{ course.source }}</text>
							<text class="teacher">{{ course.teacher }}</text>
						</view>
					</view>
					<view class="course-type" :style="{ backgroundColor: getCourseColor(course.color) + '20' }">
						<text class="type-text"
							:style="{ color: getCourseColor(course.color) }">{{ course.type }}</text>
					</view>
					<view class="auto-reminder-icon" v-if="reminderSettings.enabled && hasUpcomingReminder(course)">
						🔔
					</view>
				</view>

				<!-- 无课程时显示（只有在非加载状态且确实无课程时才显示） -->
				<view v-else class="no-courses" key="no-courses">
					<image src="/static/no_course.png" mode="aspectFit" class="no-course-img"></image>
					<text class="no-course-text">当天无课程安排</text>
					<text class="no-course-tip">放松一下或安排自习吧~</text>
				</view>
			</transition-group>
		</view>

		<!-- 课程详情弹窗 - 带有动画效果 -->
		<view class="detail-mask" v-if="showDetail" @click="hideDetail">
			<view class="detail-dialog" @click.stop>
				<view class="dialog-header"
					:style="{ backgroundColor: getCourseColor(currentCourse.color) + '20', borderBottomColor: getCourseColor(currentCourse.color) + '40' }">
					<text class="dialog-title">{{ currentCourse.title }}</text>
					<view class="close-btn" @click="hideDetail">×</view>
				</view>
				<view class="detail-info">
					<view class="info-item">
						<image src="/static/icon_resources/teacher_icon.png" mode="aspectFit" class="info-icon"></image>
						<view class="info-content">
							<text class="label">授课老师</text>
							<text class="value">{{ currentCourse.teacher }}</text>
						</view>
					</view>
					<view class="info-item">
						<image src="/static/icon_resources/location_icon.png" mode="aspectFit" class="info-icon">
						</image>
						<view class="info-content">
							<text class="label">上课地点</text>
							<text class="value">{{ currentCourse.source }}</text>
						</view>
					</view>
					<view class="info-item">
						<image src="/static/icon_resources/day_icon.png" mode="aspectFit" class="info-icon"></image>
						<view class="info-content">
							<text class="label">上课时间</text>
							<text class="value">{{ currentCourse.time }}</text>
						</view>
					</view>
					<view class="info-item">
						<image src="/static/icon_resources/week_icon.png" mode="aspectFit" class="info-icon"></image>
						<view class="info-content">
							<text class="label">上课周数</text>
							<text class="value">{{ currentCourse.weeks }}</text>
						</view>
					</view>
				</view>
				<view class="dialog-footer">
					<button class="dialog-btn" @click="hideDetail">我知道了</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// Script section remains the same as the previous optimized version.
	// No logic changes are needed for the animations.
	export default {
		data() {
			return {
				// --- 核心数据 ---
				userId: uni.getStorageSync('userID'),
				termStartDate: '2025/06/02',
				currentDate: this.getTodayDate(),
				eventList: [],
				weekInfo: '',

				// --- 状态控制 ---
				showDetail: false,
				currentCourse: {},
				isLoading: false,

				// --- 自动课前提醒 ---
				autoReminders: [], // 存储所有自动提醒的定时器ID
				reminderSettings: {
					enabled: true, // 总开关：是否启用自动提醒
					advanceMinutes: 30 // 默认提前30分钟提醒
				},

				// --- 样式与配置 ---
				colorValues: ['#db806b', '#e9af63', '#f1d17a', '#a2b770', '#7a9db3', '#8a8ab1', '#b6dddc', '#9aa4a3',
					'#ae8c6a', '#f2ccd5'
				],
				baseUrl: globalThis.BASE_API,
			};
		},
		computed: {
			termStartPicker() {
				return this.termStartDate.replace(/\//g, '-');
			},
			formattedDate() {
				const [year, month, day] = this.currentDate.split('/');
				return `${month}月${day}日`;
			},
			weekday() {
				const date = new Date(this.currentDate);
				const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				return weekDays[date.getDay()];
			}
		},
		onLoad() {
			this.initAutoReminders();
			this.updateDateInfo(this.currentDate);
		},
		onUnload() {
			// 页面卸载时必须清理所有定时器，防止内存泄漏和后台异常提醒
			this.clearAllAutoReminders();
		},
		methods: {
			// --- 数据获取与处理 ---
			async fetchCourses(date) {
				this.isLoading = true;
				// 不要立即清空 eventList，让用户看到加载状态
				// this.eventList = []; // 删除这行
				this.clearAllAutoReminders();

				try {
					const weekNum = this.calculateWeekNumber(new Date(date));
					const dayOfWeek = new Date(date).getDay() || 7;

					const response = await uni.request({
						url: `${this.baseUrl}/course/week/${this.userId}/${weekNum}`,
						method: 'GET',
					});

					if (response.statusCode !== 200 || response.data.code !== 200) {
						throw new Error(response.data.message || '获取课程失败');
					}

					const allCourses = response.data.data;
					const todayCourses = allCourses.filter(course =>
						course.timeSlots && course.timeSlots.some(slot => slot.dayOfweek === dayOfWeek)
					);

					// 成功获取数据后再更新列表
					this.eventList = todayCourses.map(course => this.formatCourseData(course, dayOfWeek))
						.filter(Boolean)
						.sort((a, b) => a.periods[0] - b.periods[0]);

					this.setupAutoReminders();

				} catch (e) {
					console.error('获取课程失败', e);
					this.eventList = []; // 出错时清空列表
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
				} finally {
					this.isLoading = false;
				}
			},
			formatCourseData(course, dayOfWeek) {
				const todaySlots = course.timeSlots.filter(slot => slot.dayOfweek === dayOfWeek);
				if (todaySlots.length === 0) return null;

				const periods = [...new Set(todaySlots.map(slot => slot.period))].sort((a, b) => a - b);
				const allWeeks = [...new Set(course.timeSlots.filter(slot => slot.dayOfweek === dayOfWeek).map(slot => slot
					.week))].sort((a, b) => a - b);

				return {
					id: course.courseId,
					color: course.color || 0,
					time: this.getPeriodTimeRange(periods),
					title: course.coursename,
					source: course.location,
					teacher: course.teacher,
					type: course.isElective ? '选修' : '必修',
					weeks: this.formatWeekList(allWeeks),
					periods: periods, // 保存节次信息，用于计算提醒时间
				};
			},

			// --- 日期与时间辅助函数 ---
			updateDateInfo(newDate) {
				this.currentDate = newDate;
				this.weekInfo = this.getWeekInfo(newDate);
				this.fetchCourses(newDate);
			},
			onDateChange(e) {
				const newDate = e.detail.value.replace(/-/g, '/');
				this.updateDateInfo(newDate);
			},
			getWeekInfo(dateStr) {
				const weekNum = this.calculateWeekNumber(new Date(dateStr));
				return `第${weekNum}周`;
			},
			calculateWeekNumber(date) {
				const termStart = new Date(this.termStartDate);
				const diffTime = date - termStart;
				const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
				return Math.floor(diffDays / 7) + 1;
			},
			getTodayDate() {
				const now = new Date();
				const y = now.getFullYear();
				const m = String(now.getMonth() + 1).padStart(2, '0');
				const d = String(now.getDate()).padStart(2, '0');
				return `${y}/${m}/${d}`;
			},
			getOffsetDate(dateStr, offset) {
				const date = new Date(dateStr);
				date.setDate(date.getDate() + offset);
				const y = date.getFullYear();
				const m = String(date.getMonth() + 1).padStart(2, '0');
				const d = String(date.getDate()).padStart(2, '0');
				return `${y}/${m}/${d}`;
			},

			// --- 导航与UI交互 ---
			goToday() {
				this.updateDateInfo(this.getTodayDate());
			},
			goPrevDay() {
				this.updateDateInfo(this.getOffsetDate(this.currentDate, -1));
			},
			goNextDay() {
				this.updateDateInfo(this.getOffsetDate(this.currentDate, 1));
			},
			showCourseDetail(course) {
				this.currentCourse = course;
				this.showDetail = true;
			},
			hideDetail() {
				this.showDetail = false;
			},
			getCourseColor(color) {
				return this.colorValues[Math.max(0, Math.min(9, color || 0))];
			},

			// --- 自动课前提醒核心功能 ---

			/**
			 * @description 初始化自动提醒系统，从本地存储加载用户设置。
			 */
			initAutoReminders() {
				const savedSettings = uni.getStorageSync('reminderSettings');
				if (savedSettings) {
					this.reminderSettings = {
						...this.reminderSettings,
						...savedSettings
					};
				}
			},

			/**
			 * @description 为当前列表中的所有课程设置定时提醒。
			 */
			setupAutoReminders() {
				if (!this.reminderSettings.enabled || !this.eventList || this.eventList.length === 0) {
					return;
				}

				const now = new Date();
				this.eventList.forEach(course => {
					const courseStartTime = this.getCourseStartTime(course, this.currentDate);
					if (!courseStartTime) return; // 无法解析时间则跳过

					const reminderTime = new Date(courseStartTime.getTime() - this.reminderSettings
						.advanceMinutes * 60 * 1000);

					// 如果提醒时间已过，则不设置
					if (reminderTime <= now) {
						return;
					}

					const timeoutId = setTimeout(() => {
						this.showCourseReminder(course);
					}, reminderTime.getTime() - now.getTime());

					this.autoReminders.push(timeoutId);
				});

				console.log(`为 ${this.currentDate} 设置了 ${this.autoReminders.length} 个自动提醒。`);
			},

			/**
			 * @description 显示课程提醒弹窗，并可触发震动。
			 * @param {Object} course - 课程对象
			 */
			showCourseReminder(course) {
				const reminderContent = `课程：${course.title}\n地点：${course.source}\n时间：${course.time}`;

				uni.showModal({
					title: '📚 课程即将开始',
					content: `${this.reminderSettings.advanceMinutes}分钟后上课\n\n${reminderContent}`,
					confirmText: '查看详情',
					success: (res) => {
						if (res.confirm) {
							this.showCourseDetail(course);
						}
					}
				});

				if (uni.vibrateShort) {
					uni.vibrateShort();
				}
			},

			/**
			 * @description 清理所有已设置的自动提醒定时器。
			 */
			clearAllAutoReminders() {
				this.autoReminders.forEach(clearTimeout);
				this.autoReminders = [];
			},

			/**
			 * @description 切换自动提醒功能的开关。
			 */
			toggleAutoReminder() {
				this.reminderSettings.enabled = !this.reminderSettings.enabled;
				uni.setStorageSync('reminderSettings', this.reminderSettings);

				if (this.reminderSettings.enabled) {
					this.setupAutoReminders(); // 开启时立即为当前课程设置提醒
					uni.showToast({
						title: '自动提醒已开启',
						icon: 'success'
					});
				} else {
					this.clearAllAutoReminders(); // 关闭时清除所有提醒
					uni.showToast({
						title: '自动提醒已关闭',
						icon: 'none'
					});
				}
			},

			/**
			 * @description (长按触发) 显示操作表，让用户设置提前提醒的时间。
			 */
			showReminderSettings() {
				const timeOptions = ['5分钟', '10分钟', '15分钟', '30分钟', '45分钟', '60分钟'];
				uni.showActionSheet({
					itemList: timeOptions,
					success: (res) => {
						const minutes = parseInt(timeOptions[res.tapIndex]);
						this.reminderSettings.advanceMinutes = minutes;
						uni.setStorageSync('reminderSettings', this.reminderSettings);

						// 更新设置后，重新规划所有提醒
						this.clearAllAutoReminders();
						this.setupAutoReminders();

						uni.showToast({
							title: `提醒已设为提前${minutes}分钟`,
							icon: 'success'
						});
					}
				});
			},

			/**
			 * @description 检查课程是否在未来有提醒，用于UI显示提醒图标。
			 * @param {Object} course - 课程对象
			 * @returns {boolean}
			 */
			hasUpcomingReminder(course) {
				const courseStartTime = this.getCourseStartTime(course, this.currentDate);
				return courseStartTime && courseStartTime > new Date();
			},

			// --- 提醒功能辅助函数 ---

			/**
			 * @description 根据课程对象和日期，计算出课程的精确开始时间。
			 * @param {Object} course - 课程对象
			 * @param {string} dateString - 日期字符串 (e.g., "2025/06/02")
			 * @returns {Date|null}
			 */
			getCourseStartTime(course, dateString) {
				if (!course.periods || course.periods.length === 0) return null;
				const firstPeriod = course.periods[0];

				const periodTimeMap = {
					1: {
						hour: 8,
						minute: 0
					},
					2: {
						hour: 8,
						minute: 55
					},
					3: {
						hour: 10,
						minute: 10
					},
					4: {
						hour: 11,
						minute: 5
					},
					5: {
						hour: 14,
						minute: 30
					},
					6: {
						hour: 15,
						minute: 25
					},
					7: {
						hour: 16,
						minute: 40
					},
					8: {
						hour: 17,
						minute: 35
					},
					9: {
						hour: 19,
						minute: 10
					},
					10: {
						hour: 20,
						minute: 5
					},
					11: {
						hour: 21,
						minute: 0
					},
					12: {
						hour: 21,
						minute: 55
					}
				};

				const timeInfo = periodTimeMap[firstPeriod];
				if (!timeInfo) return null;

				const [year, month, day] = dateString.split('/').map(Number);
				return new Date(year, month - 1, day, timeInfo.hour, timeInfo.minute);
			},

			getPeriodTimeRange(periods) {
				if (!periods || periods.length === 0) return '时间未定';
				const timeMap = {
					1: '08:00',
					2: '08:55',
					3: '10:10',
					4: '11:05',
					5: '14:30',
					6: '15:25',
					7: '16:40',
					8: '17:35',
					9: '19:10',
					10: '20:05',
					11: '21:00',
					12: '21:55'
				};
				const endTimeMap = {
					1: '08:45',
					2: '09:40',
					3: '10:55',
					4: '11:50',
					5: '15:15',
					6: '16:10',
					7: '17:25',
					8: '18:20',
					9: '19:55',
					10: '20:50',
					11: '21:45',
					12: '22:40'
				};

				const startTime = timeMap[periods[0]];
				const endTime = endTimeMap[periods[periods.length - 1]];
				return `${startTime}-${endTime}`;
			},

			formatWeekList(weeks) {
				if (!weeks || weeks.length === 0) return '未定周数';
				if (weeks.length > 1) {
					let isContinuous = true;
					for (let i = 1; i < weeks.length; i++) {
						if (weeks[i] !== weeks[i - 1] + 1) {
							isContinuous = false;
							break;
						}
					}
					if (isContinuous) return `第${weeks[0]}-${weeks[weeks.length - 1]}周`;
				}
				return `第${weeks.join(',')}周`;
			},
		}
	};
</script>

<style scoped>
	/* 主题色变量，与设置页面保持一致 */
	:root {
		--primary-color: #90a3ba;
		--bg-color: #F0F1F2;
		--card-bg: #FFFFFF;
		--text-color: #4A4A4A;
		--sub-text-color: #7D7D7D;
		--card-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	/* 基础样式 */
	.container {
		background-color: var(--bg-color);
		min-height: 100vh;
	}

	/* 头部样式 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 20px;
		background-color: rgba(240, 241, 242, 0.8);
		/* 使用背景色的半透明版本 */
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		position: sticky;
		top: 0;
		z-index: 10;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	}

	.header-left-section {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.header-right-section {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	/* 日期选择器样式 */
	.date-selector {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.arrow {
		font-size: 20px;
		color: var(--primary-color-dark);
		padding: 4px 8px;
		/* transition: transform 0.2s ease; */
		
	}

	.arrow:active {
		transform: scale(0.9);
		color: var(--sub-text-color);
		
	}

	.date-box {
		display: flex;
		align-items: baseline;
		gap: 8px;
		padding: 8px 12px;
	}

	.date {
		font-size: 22px;
		font-weight: bold;
		color: var(--text-color);
	}

	.weekday {
		font-size: 14px;
		color: var(--sub-text-color);
	}

	.week-info {
		font-size: 14px;
		color: var(--sub-text-color);
		padding-left: 4px;
	}

	/* 头部按钮样式 */
	.reminder-toggle-btn,
	.today-btn {
		color: #fff;
		border: none;
		border-radius: 16px;
		transition: all 0.2s ease;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}

	.reminder-toggle-btn {
		font-size: 18px;
		padding: 0 12px;
		min-width: 44px;
	}

	.today-btn {
		font-size: 14px;
		padding: 0 16px;
		background-color: var(--primary-color);
	}

	.today-btn:active {
		filter: brightness(0.9);
	}

	/* 课程列表区域 */
	.section {
		padding: 10px 20px 20px;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.section-title {
		font-size: 18px;
		font-weight: 600;
		color: var(--text-color);
	}

	.reminder-status {
		font-size: 12px;
		color: var(--sub-text-color);
		background-color: var(--primary-color);
		padding: 4px 8px;
		border-radius: 12px;
	}

	.course-list {
		position: relative;
		/* transition-group 需要 */
	}

	/* 课程卡片样式 */
	.course-card {
		display: flex;
		align-items: center;
		background-color: var(--card-bg);
		border-radius: 16px;
		padding: 16px;
		box-shadow: var(--card-shadow);
		border-left: 6px solid;
		/* 颜色由内联样式提供 */
		position: relative;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
		margin-bottom: 12px;
	}

	.course-card:active {
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
	}

	.course-time {
		margin-right: 16px;
		font-size: 14px;
		color: var(--sub-text-color);
		font-weight: 500;
	}

	.course-content {
		flex: 1;
	}

	.title {
		font-size: 16px;
		font-weight: 600;
		color: var(--text-color);
		margin-bottom: 6px;
	}

	.course-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.source,
	.teacher {
		font-size: 12px;
		color: var(--sub-text-color);
		padding: 2px 8px;
		background-color: var(--bg-color);
		border-radius: 10px;
	}

	.course-type {
		position: absolute;
		top: 16px;
		right: 16px;
		padding: 4px 8px;
		border-radius: 10px;
		font-size: 12px;
	}

	.type-text {
		font-weight: 500;
	}

	.auto-reminder-icon {
		position: absolute;
		top: 10px;
		right: -5px;
		font-size: 14px;
		transform: rotate(15deg);
		opacity: 0.5;
	}

	/* 无课程样式 */
	.no-courses {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40px 0;
	}

	.no-course-img {
		width: 120px;
		height: 120px;
		opacity: 0.6;
		margin-bottom: 16px;
	}

	.no-course-text {
		font-size: 16px;
		color: var(--sub-text-color);
		margin-bottom: 8px;
	}

	.no-course-tip {
		/* 添加你需要的样式 */
		color: var(--primary-color-dark);
	}

	/* 课程详情弹窗样式 */
	.detail-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
		animation: fadeIn 0.3s ease-out forwards;
	}

	.detail-dialog {
		background-color: var(--card-bg);
		border-radius: 20px;
		width: 90%;
		max-width: 500px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
		animation: popIn 0.3s ease-out forwards;
	}

	.dialog-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		border-bottom: 1px solid #f0f0f0;
	}

	.dialog-title {
		font-size: 18px;
		font-weight: 600;
		color: var(--text-color);
	}

	.close-btn {
		font-size: 24px;
		color: var(--sub-text-color);
	}

	.detail-info {
		padding: 20px;
	}

	.info-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 16px;
	}

	.info-icon {
		width: 20px;
		height: 20px;
		margin-right: 12px;
		margin-top: 2px;
	}

	.info-content {
		display: flex;
		flex-direction: column;
	}

	.label {
		font-size: 14px;
		color: var(--sub-text-color);
		margin-bottom: 4px;
	}

	.value {
		font-size: 16px;
		color: var(--text-color);
	}

	.dialog-footer {
		padding: 10px 20px 20px;
	}

	.dialog-btn {
		width: 100%;
		background-color: var(--primary-color);
		color: white;
		border-radius: 12px;
		font-size: 16px;
		padding: 12px 0;
		transition: filter 0.2s ease;
	}

	.dialog-btn:active {
		filter: brightness(0.9);
	}

	/* --- 动画效果 --- */

	/* 弹窗动画 */
	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes popIn {
		from {
			opacity: 0;
			transform: scale(0.9);
		}

		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	/* 列表动画 (transition-group) */
	.list-enter-active {
		transition: all 0.4s ease-out;
	}

	.list-leave-active {
		transition: all 0.3s ease-in;
		/* 离开时脱离文档流，让其他元素能平滑移动 */
		position: absolute;
		width: calc(100% - 40px);
		/* 减去父容器的padding */
	}

	.list-enter-from,
	.list-leave-to {
		opacity: 0;
		transform: translateY(20px);
	}

	/* 保证列表移动时也具有动画效果 */
	.list-move {
		transition: transform 0.4s ease;
	}

	/* 日期切换动画 */
	.fade-date-enter-active,
	.fade-date-leave-active {
		transition: opacity 0.2s ease;
	}

	.fade-date-enter-from,
	.fade-date-leave-to {
		opacity: 0;
	}
	.loading-state {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    padding: 40px 0;
	}
	
	.loading-spinner {
	    width: 40px;
	    height: 40px;
	    border: 3px solid var(--bg-color);
	    border-top: 3px solid var(--primary-color);
	    border-radius: 50%;
	    animation: spin 1s linear infinite;
	    margin-bottom: 16px;
	}
	
	.loading-text {
	    font-size: 14px;
	    color: var(--sub-text-color);
	}
	
	@keyframes spin {
	    0% { transform: rotate(0deg); }
	    100% { transform: rotate(360deg); }
	}
</style>